<template>
  <div>
    <a-cascader
      :options="options"
      v-model="createPlace"
      :fieldNames="fieldNames"
      @change="selectPlace"
      :loadData="loadData"
      :placeholder="tiptxt"
      :allowClear="allowClear"
      changeOnSelect
    />
  </div>
</template>

<script>
import { province, city, district } from '../store/action.js'
export default {
  name: 'areaSelect',
  props: {
    tiptxt: {
      type: String,
      default: '请选择所属区域',
      required: false
    },
    allowClear: {
      type: Boolean,
      default: true,
      required: false
    },
    createPlace: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      fieldNames: { label: 'name', value: 'id', children: 'children' },
      options: [],
      provinceId: '',
      cityId: '',
      flag: true,
      districtId: ''
    }
  },
  watch: {
    async createPlace(val) {
      if (this.flag) {
        this.flag = false
        if (val[0]) {
          if (!this.options.length) {
            await this.getProvince()
          }
        }
        if (val[1]) {
          await this.getCity(val[0])
        }
        if (val[2]) {
          await this.getDistrict(val[0], val[1])
        }
      }
    }
  },
  async mounted() {
    if (this.createPlace && this.createPlace.length == 3) {
      const [pid, cid] = this.createPlace
      await this.getProvince()
      await this.getCity(pid)
      await this.getDistrict(pid, cid)
    } else {
      this.getProvince()
    }
  },
  methods: {
    loadData(res) {},
    // 获取省
    getProvince() {
      province().then(res => {
        if (!res.error) {
          res.data.forEach(element => {
            element.isLeaf = false
          })
          this.options = res.data
        }
      })
    },
    // 获取市
    getCity(id) {
      return new Promise((resolve, reject) => {
        city(id).then(res => {
          if (!res.error) {
            res.data.forEach(element => {
              element.isLeaf = false
            })
            const options = JSON.parse(JSON.stringify(this.options))
            let item = options.find(item => item.id === id)
            let index = options.indexOf(item)
            options[index].children = [...res.data]
            this.options = JSON.parse(JSON.stringify(options))
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    // 获取县
    getDistrict(pid, id) {
      return new Promise((resolve, reject) => {
        district(id).then(res => {
          if (!res.error) {
            const options = JSON.parse(JSON.stringify(this.options))
            let item = options.find(item => item.id === pid)
            let index = options.indexOf(item)
            let childItem = options[index].children.find(item => item.id === id)
            let childIndex = options[index].children.indexOf(childItem)
            options[index].children[childIndex].children = [...res.data]
            this.options = JSON.parse(JSON.stringify(options))
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    // 选中后获取省市区id
    async selectPlace(area, selectedOptions) {
      console.log(selectedOptions)
      const [pid, cid, did] = area
      if ((pid || pid == 0) && !cid && !did) {
        await this.getCity(pid)
      }
      if ((cid || cid == 0) && !did) {
        await this.getDistrict(pid, cid)
      }
      this.$emit('handlePlace', {
        area: area,
        provinceId: area[0] || '',
        cityId: area[1] || '',
        districtId: area[2] || '',
        selectedOptions
      })
    }
  }
}
</script>

<style>
</style>
